<template>
	<view class="page-user-detail">
		<cl-topbar title="个人信息"> </cl-topbar>

		<view class="users">
			<view class="avatar">
				<cl-avatar
					:src="data.myImg"
					:size="100"
				></cl-avatar>
			</view>

			<view class="det">
				<text class="name">{{data.myName}}</text>
				<text class="id">id：{{data.uid}}</text>
				<text class="address">注册时间：{{data.intime}}</text>
			</view>
		</view>

		<view class="group">
			<cl-list label="查找聊天内容">
				<text slot="suffix" class="cl-icon-arrow-right"></text>
			</cl-list>
			<cl-list label="清空聊天记录">
				<text slot="suffix" class="cl-icon-arrow-right"></text>
			</cl-list>
		</view>

		<view class="group">
			<cl-list label="消息免打扰">
				<cl-switch active-color="#FFC100"></cl-switch>
			</cl-list>
			<cl-list label="强提醒">
				<cl-switch active-color="#FFC100"></cl-switch>
			</cl-list>
		</view>

		<view class="group">
			<cl-list label="投诉">
				<text slot="suffix" class="cl-icon-arrow-right"></text>
			</cl-list>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data:{}
		};
	},
	onLoad(options) {
		var data = JSON.parse(options.data);
		data.myImg = global.baseUrl + data.myImg;
		this.data = data;
	},
	computed: {

	},

	methods: {

	}
};
</script>

<style lang="scss">
page {
	background-color: #f6f7f9;
}

.page-user-detail {
	.group {
		margin-bottom: 20rpx;

		.cl-list {
			border: 0;
		}
	}

	.users {
		display: flex;
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;

		.avatar {
			margin-right: 30rpx;
		}

		.det {
			display: flex;
			flex-direction: column;

			.name {
				font-size: 30rpx;
				font-weight: bold;
			}

			.id,
			.address {
				font-size: 24rpx;
				color: #999;
			}

			text {
				margin-bottom: 4rpx;
			}
		}
	}
}
</style>
